<!--
 * @Description: PC头部菜单

 * @Date: 2021-05-19 14:07:29

 * @LastEditTime: 2021-12-15 17:09:06
-->
<template>
  <div>
    <div class="topBar">
      <!-- 左侧内容 -->
      <div>
        <el-button size="small ml10" class="f14 pointer" v-if="$route.path!='/MallStoretemplate'"
          @click="expand">菜单{{expandCollapse}}</el-button>
        <el-button size="small ml10" class="f14 pointer" v-if="distributorCode != ''"
          @click="back">返回</el-button>
      </div>
      <span class="f14 pointer" @click="mallPage">页面</span>
      <!-- <el-button size="small" @click="toSchema">schema 生成器</el-button> -->
      <div>
        <el-button size="small ml10" @click="viewQr">商城二维码</el-button>

        <el-button size="small ml10" @click="realshow">实时预览</el-button>

        <el-button size="small f-white bg-theme" @click="openSave">保存</el-button>
      </div>
      <!-- 右侧内容 -->
      <div>
        <!--<el-button size="small ml10" @click="onLogout">退出</el-button> -->
      </div>
    </div>

    <real-timeView :show.sync="show" ref="real"></real-timeView>

    <save-dialog ref="save"></save-dialog>

    <qr-dialog ref="qr"></qr-dialog>
  </div>
</template>

<script>
import RealTimeView from "./RealTimeView.vue";
import SaveDialog from "@/components/SaveDialog";
import QrDialog from "@/components/QrDialog";

export default {
  components: {
    RealTimeView,
    SaveDialog,
    QrDialog,
  },
  props: {
    distributorCode: "",
    meneStatus: true,
  },
  provide() {
    return {
      topBar: this,
    };
  },

  data() {
    return {
      show: false,
      project: {},
      expandCollapse: "收起",
    };
  },

  computed: {},
  watch: {
    project: {
      handler(newval, oldval) {
        // this.$store.getters.data().project = newval;
      },
      deep: true,
    },
  },

  methods: {
    expand() {
      if (this.meneStatus) {
        this.expandCollapse = "展开";
        this.$parent.meneStatus = false;
      } else {
        this.expandCollapse = "收起";
        this.$parent.meneStatus = true;
      }
    },
    back() {
      if (this.$route.path == "/MallStoretemplate") {
        this.$router.go(-1);
      } else {
        this.$emit("upRout", 1);
      }
    },
    mallTemp() {
      // this.$router.push({ name: "MallStoretemplate" });
    },
    mallPage() {
      if (this.distributorCode) {
        this.$emit("upRout", 2);
      } else {
        this.$message.error("请选择分销商小程序");
      }
    },
    openSave(view = false) {
      this.project = this.$store.getters.data().project;
      let pagesList = this.project.pages;
      pagesList.forEach((e) => {
        e.componentList.map((j) => {
          if (j.list && j.list instanceof Array && j.list.length) {
            j.list = j.list.filter((_) => {
              return _.image.length;
            });
          }
        });
      });

      if (this.project.cover == null) {
        console.log("ii");
        let editFormFields = {
          id: this.project.id,
          config: JSON.stringify(this.project.config),
          pages: JSON.stringify(pagesList),
          modifier: "",
          modifyID: "",
          modifyDate: "",
        };
        this.http
          .post("api/Stores/update", { mainData: editFormFields }, false)
          .then((reslut) => {
            if (reslut.status) {
              this.getStoreList(this.project.supplierCode);
              this.$message.success(reslut.message);
            } else {
              this.$message.error(reslut.message);
            }
          });
      } else {
        // this.$refs.save.open(view);
        let editFormFields = {
          id:this.project.id,
          config: JSON.stringify(this.project.config),
          pages: JSON.stringify(pagesList),
          modifier: "",
          modifyID: "",
          modifyDate: "",
        };
         this.http
          .post("api/Stores/update", { mainData: editFormFields }, false)
          .then((reslut) => {
            if (reslut.status) {
              this.getStoreList(this.project.supplierCode);
              this.$message.success(reslut.message);
            } else {
              this.$message.error(reslut.message);
            }
          });
      }
    },
    getStoreList(distributorCode) {
      let params = {
        page: 1,
        rows: 30,
        sort: "createDate",
        order: "desc",
        wheres:
          '[{"name":"supplierCode","value":"' +
          distributorCode +
          '","displayType":"Equal"}]',
      };
      this.http.post("api/Stores/getPageData", params, false).then((reslut) => {
        if (reslut.rows.length > 0) {
          this.project = reslut.rows[0];
          this.project.config = JSON.parse(reslut.rows[0].config);
          this.project.pages = JSON.parse(reslut.rows[0].pages);
        }
      });
    },
    toSchema() {
      let { href } = this.$router.resolve({
        path: "/schema",
      });
      window.open(href);
    },
    realshow() {
      this.$refs.real.project = this.$store.getters.data().project;
      this.show = true;
    },
    viewQr() {
      this.$refs.qr.project = this.$store.getters.data().project;
      this.$confirm("如不更新，则预览为上次保存的项目数据?", "是否更新保存", {
        confirmButtonText: "更新保存",
        cancelButtonText: "不更新",
        type: "warning",
      })
        .then(() => {
          console.log("w");
          this.openSave(true);
        })
        .catch(() => {
          console.log("x");
          this.openQr();
        });
    },

    openQr() {
      this.$refs.qr.open();
    },

    // 保存
    async save() {
      let data = {
        id: this.project.id,
        userId: this.userInfo.userId,
        name: this.project.name,
        richText: JSON.stringify(this.project),
      };

      // let { status } = await editProject(data);

      // if (status == "10000")
      //   this.$notify({
      //     title: "成功",
      //     message: "项目保存成功",
      //     type: "success",
      //   });
    },

    // 退出
    onLogout() {
      this.$confirm("是否确定退出平台?", "退出", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.logout();
        this.$router.push({ name: "login" });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.topBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  width: 100%;
  padding: 0 20px;
  background: #fff;
  border-bottom: 1px solid #ebedf0;
}
</style>
